<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <title>物业管理系统</title>
    <link href="./themes/nzblue/css/css.css" rel="stylesheet" type="text/css">
    <link href="./themes/nzblue/css/css_2.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div id="app">
        <table width="100%" height="200" border="0" align="center" cellpadding="0" cellspacing="0" style="background-color: #1C5CA6; background-image: url(themes/nzblue/images/nzgov_06.jpg); background-attachment: scroll; background-repeat: no-repeat; background-position: center center;">
            <tr>
                <td align="right" valign="middle">
                    <table border="0" cellpadding="0" cellspacing="0" style="margin-right: 20px;">

                    </table>
                </td>
            </tr>
        </table>

        <div id="top_dh_box">
            <div id="top_dh_01">
                <div id="sddm">
                    <li id="sddmdiv2"><a href="index.html">本站首页</a></li>
                    <li v-for="item in bannerList" :key="item.bannerid">
                        <table width="120" border="0" cellpadding="0" cellspacing="0" class="dh_bj01">
                            <tr>
                                <td height="55" align="center"><a :href="'article.html?id='+item.bannerid+''">{{ item.bannername }}</a></td>
                            </tr>
                        </table>
                    </li>
                    <!--导航 -->
                    <!--导航 -->
                    <li v-if="!islogin">
                        <table width="120" border="0" cellpadding="0" cellspacing="0" class="dh_bj01">
                            <tr>
                                <td height="55" align="center"><a href="#" onmouseover="mopen('m663')" onmouseout="mclosetime()">用户菜单</a></td>
                            </tr>
                        </table>
                        <div id="m663" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()">
                            <table border="0" cellpadding="0" cellspacing="0" class="top_dh_02">
                                <tr>
                                    <td align=left>
                                        <table width="100" border="0" cellpadding="0" cellspacing="0" class="xux" onMouseOver="this.bgColor='#F5F5F5';" onMouseOut="this.bgColor='#FFFFFF';" bgcolor="#ffffff">
                                            <tr>
                                                <td height="40">
                                                    <a href="editpwd.html"><img src="themes/nzblue/images/biao.gif" border="0">&nbsp;修改密码</a>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                                <tr>
                                    <td align=left>
                                        <table width="100" border="0" cellpadding="0" cellspacing="0" class="xux" onMouseOver="this.bgColor='#F5F5F5';" onMouseOut="this.bgColor='#FFFFFF';" bgcolor="#ffffff">
                                            <tr>
                                                <td height="40">
                                                    <a href="userinfo.html"><img src="themes/nzblue/images/biao.gif" border="0">&nbsp;个人信息</a>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                                <tr>
                                    <td align=left>
                                        <table width="100" border="0" cellpadding="0" cellspacing="0" class="xux" onMouseOver="this.bgColor='#F5F5F5';" onMouseOut="this.bgColor='#FFFFFF';" bgcolor="#ffffff">
                                            <tr>
                                                <td height="40">
                                                    <a href="mycharge.html"><img src="themes/nzblue/images/biao.gif" border="0">&nbsp;我的费用</a>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                                <tr>
                                    <td align=left>
                                        <table width="100" border="0" cellpadding="0" cellspacing="0" class="xux" onMouseOver="this.bgColor='#F5F5F5';" onMouseOut="this.bgColor='#FFFFFF';" bgcolor="#ffffff">
                                            <tr>
                                                <td height="40">
                                                    <a href="myparks.html"><img src="themes/nzblue/images/biao.gif" border="0">&nbsp;我的停车位</a>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                                <tr>
                                    <td align=left>
                                        <table width="100" border="0" cellpadding="0" cellspacing="0" class="xux" onMouseOver="this.bgColor='#F5F5F5';" onMouseOut="this.bgColor='#FFFFFF';" bgcolor="#ffffff">
                                            <tr>
                                                <td height="40">
                                                    <a href="addrepair.html"><img src="themes/nzblue/images/biao.gif" border="0">&nbsp;业主报修</a>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                                <tr>
                                    <td align=left>
                                        <table width="100" border="0" cellpadding="0" cellspacing="0" class="xux" onMouseOver="this.bgColor='#F5F5F5';" onMouseOut="this.bgColor='#FFFFFF';" bgcolor="#ffffff">
                                            <tr>
                                                <td height="40">
                                                    <a href="myrepair.html"><img src="themes/nzblue/images/biao.gif" border="0">&nbsp;我的报修</a>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                                <tr>
                                    <td align=left>
                                        <table width="100" border="0" cellpadding="0" cellspacing="0" class="xux" onMouseOver="this.bgColor='#F5F5F5';" onMouseOut="this.bgColor='#FFFFFF';" bgcolor="#ffffff">
                                            <tr>
                                                <td height="40">
                                                    <a href="addcomplains.html"><img src="themes/nzblue/images/biao.gif" border="0">&nbsp;意见反馈</a>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                                <tr>
                                    <td align=left>
                                        <table width="100" border="0" cellpadding="0" cellspacing="0" class="xux" onMouseOver="this.bgColor='#F5F5F5';" onMouseOut="this.bgColor='#FFFFFF';" bgcolor="#ffffff">
                                            <tr>
                                                <td height="40">
                                                    <a href="mycomplains.html"><img src="themes/nzblue/images/biao.gif" border="0">&nbsp;我的意见反馈</a>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </li>
                    <!--导航 -->
                    <li v-if="!islogin">
                        <table width="120" border="0" cellpadding="0" cellspacing="0" class="dh_bj01">
                            <tr>
                                <td height="55" align="center"><a href="exit.html">退出登录</a></td>
                            </tr>
                        </table>
                    </li>
                    <!--导航 
                    <li>
                        <table width="120" border="0" cellpadding="0" cellspacing="0" class="dh_bj01">
                            <tr>
                                <td height="55" align="center"><a href="index/preReg.action">用户注册</a></td>
                            </tr>
                        </table>
                    </li>-->
                    <li v-if="islogin">
                        <table width="120" border="0" cellpadding="0" cellspacing="0" class="dh_bj01">
                            <tr>
                                <td height="55" align="center"><a href="login.html">用户登录</a></td>
                            </tr>
                        </table>
                    </li>
                </div>
            </div>
            <div style="height: 15px;"></div>
            <div id="box" style="width: 1200px;">
                <table class="table1200" border="0" align="center" cellpadding="0" cellspacing="15" bgcolor="#FFFFFF">
                    <tr valign="top">
                        <td align="center">
                            <!--文章显示 -->
                            <table width="98%" border="0" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" class="list_title">
                                <tr>
                                    <td width="150" align="center" class="list_title">{{banner.bannername }}</td>
                                    <td align="right">您的位置：<a href="index.html">首页</a>&nbsp;&gt;&nbsp;&nbsp;{{banner.bannername }}
                                    </td>
                                </tr>
                            </table>
                            <table height="20" border="0" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td></td>
                                </tr>
                            </table>
                            <!--图片格式显示 -->
                            <table v-for="item in articleList" :key="item.articleid" width="98%" border="0" align="center" cellpadding="0" cellspacing="0" class="dx" onMouseOver="this.bgColor='#f5f5f5';" onMouseOut="this.bgColor='#FFFFFF';" bgcolor="#ffffff">
                                <tr>
                                    <td width="35" height="40" align="center"><img src="themes/nzblue/images/txt.png" alt="图标" /></td>
                                    <td align="left"><a :href="'read.html?id='+item.articleid+''"> {{item.title}}</a></td>
                                    <td width="110" align="left">浏览：{{item.hits}}次</td>
                                    <td width="180" align="left">发稿：{{item.addtime}}</td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
                <table border="0" align="center">
                    <tr>
                        <td align="right">
                            <p align="center">
                                <!-- 存放分页的容器 -->
                                <div id="layui" class="r"></div>
                            </p>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <div style="height: 15px;"></div>
    <iframe src="footer.html" height="200px;" width="100%" marginwidth="0" marginheight="0" scrolling="No" frameborder="NO" id="sina_roll" border="0" style="margin-bottom: 15px;"></iframe>
</body>
<script type="text/javascript" src="../admin/hui/layui/layui.js"></script>
<script type="text/javascript" src="../admin/hui/jquery/1.9.1/jquery.min.js"></script>
<!--此页面业务相关的脚本-->
<script type="text/javascript" src="../admin/hui/layui/layui.js"></script>
<script type="text/javascript" src="../admin/hui/js/axios.min.js"></script>
<script type="text/javascript" src="../admin/hui/js/vue.js"></script>
<!--下拉这里开始 -->
<script type="text/javascript">
    var timeout = 200;
    var closetimer = 0;
    var ddmenuitem = 0;
    // open hidden layer
    function mopen(id) {
        // cancel close timer
        mcancelclosetime();
        // close old layer
        if (ddmenuitem)
            ddmenuitem.style.visibility = 'hidden';
        // get new layer and show it
        ddmenuitem = document.getElementById(id);
        ddmenuitem.style.visibility = 'visible';
    }
    // close showed layer
    function mclose() {
        if (ddmenuitem)
            ddmenuitem.style.visibility = 'hidden';
    }
    // go close timer
    function mclosetime() {
        closetimer = window.setTimeout(mclose, timeout);
    }
    // cancel close timer
    function mcancelclosetime() {
        if (closetimer) {
            window.clearTimeout(closetimer);
            closetimer = null;
        }
    }
    // close layer when click-out
    document.onclick = mclose;
</script>

<script type="text/javascript">
    const vue = new Vue({ // 实例化Vue对象
        el: '#app', // 绑定作用域
        data: { //定义数据 用于vue的双向绑定
            islogin: '', // 判断是否登录
            userid: '', // 用户主键
            realname: '', // 姓名
            clazzid: '', //所在班级主键
            bannerList: {}, //  
            page: {},
            count: 0,
            page: 1,
            limit: 20,
            id: '',
            banner: [],
            articleList: {}, //  
        },
        methods: {
            getUrlParam: function() {
                var name, value;
                var str = location.href; // 取得整个地址栏
                var num = str.indexOf("?"); // 定位参数起始位置
                str = str.substr(num + 1); // 取得所有参数 
                var arr = str.split("&"); // 各个参数放到数组里
                for (var i = 0; i < arr.length; i++) {
                    num = arr[i].indexOf("=");
                    if (num > 0) {
                        name = arr[i].substring(0, num);
                        value = arr[i].substr(num + 1);
                        this.id = value; // 确认主键参数
                    }
                }
            },
            loadTable: function() { // 查询新闻信息的函数
                let _this = this;
                _this.getUrlParam();
                axios.get('http://127.0.0.1:8080/vue_wuye/index/article.action?page=' + _this.page + '&limit=' + _this.limit + '&id=' + _this.id).then(result => {
                    _this.articleList = result.data.data;
                    _this.banner = result.data.banner;
                    _this.count = result.data.count;
                    if (_this.page == 1) {
                        layui.use(['laypage'], function() {
                            const laypage = layui.laypage;
                            laypage.render({
                                elem: 'layui', // 定义标签显示
                                count: vue.count, //数据量
                                limit: vue.limit, //每页限制
                                jump: function(obj, first) {
                                    if (!first) {
                                        vue.page = obj.curr;
                                        vue.loadTable();
                                    }
                                }
                            });
                        })
                    }
                });
            },
            loadPage: function() {
                let _this = this;
                _this.loadTable();
                axios.get('http://127.0.0.1:8080/vue_wuye/index/front.action').then(result => {
                    _this.bannerList = result.data.bannerList;
                });
                _this.userid = sessionStorage.getItem('userid');
                _this.islogin = sessionStorage.getItem('userid') == null;
                _this.realname = sessionStorage.getItem('realname');
                _this.clazzid = sessionStorage.getItem('clazzid');
            },
        },
        created() { // 生命周期相关的函数
            this.loadPage();
        },
    })
</script>

</html>